<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }

    .outer{
      background-color: blueviolet;
      /* font-size: 0; */
    }

    .inner{
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* vertical-align: middle; */
    }

  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>
<!-- 

产生原因：
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
1.方案一：给行行内块设置vertical-align，值不为baseline即可，设置为middel、bottom、top均可。
2.方案二：若父元素中只有一张图片，设置图片为display：block。
3.方案三：给父元素设置font-size：θ。如果该行内块内部还有文本，则需单独设置font-size。

-->